import '../../css/department/list.scss'
import React, { useState, useEffect } from 'react';
import { Button, Input, Tree, Popconfirm, message  } from 'antd';
import { departmentList,departmentDel,departmentShow } from '../../api/department/departmentList'
import { useNavigate } from 'react-router-dom';
const DepartmentList = () => {
  useEffect(() => {
    // 调用列表数据
    getDepartmentList()
  }, [])
  // 跳转路由的方法
  const navigate = useNavigate()
  // 树型控件数据
  const [data, setData] = useState<any>()
  // 或取文本框的内容
  const [input, setInput] = useState<any>('')
  // 或取文本框的内容
  const changeInput = (e: any) => {
    setInput(e.target.value)
  }


  // 树型控件内容
  const jsxTree = (name: string, id: number, data: any) => {
    return () => (
      <div className='tree'>
        <div>{name}</div>
        <div className='buttons'>
          <Button className="addButton" size="small" type="primary" onClick={()=>EditInfo(id)}>修改</Button>
          <Popconfirm
            title="是否确认删除?"
            onConfirm={()=>delfirm(id)}
            onCancel={cancel}
            okText="确定"
            cancelText="取消"
          >
            <Button type="primary" size="small" danger>删除</Button>
          </Popconfirm>
        </div>
      </div>
    )
  }

  // 循环添加按钮方法
  function toParse(arr: any) {
    arr.map(function (item: any) {
      item.name = jsxTree(item.name, item.id, item)
      if (item.son.length > 0 && Array.isArray(item.son)) {
        toParse(item.son)
      }
    })
    return arr
  }

  // 列表接口
  const getDepartmentList = async () => {
    const res:any = await departmentList({})
    console.log(res);
    setData(toParse(res.data))
  }

  // 删除，点击确认
  const delfirm = async(id: number) => {
    // console.log(id);
    const res:any = await departmentDel({id})
    console.log(res);
    if(res.code==='00000'){
      message.success('删除成功');
      getDepartmentList()//刷新列表数据
    }else{
      message.error(res.msg)
    }
  }

  // 删除，点击取消
  const cancel: any = () => {
    message.error('取消删除');
  };
  
  // 查询
  const search = async(input:any)=>{
    console.log(input);
    const res = await departmentShow({id:input})
    console.log(res);
    // setData(toParse(res.data))
  }

  // 点击添加跳转到添加页面
  const addInfo =()=>{
    navigate('/index/DepartmentAddEdit')
  }

  // 修改
  const EditInfo = (id:any)=>{
    console.log(id);
    navigate(`/index/DepartmentAddEdit?id=`+id)
  }
  return (<>
    <div className='list'>
      {/* 表单部分 */}
      <div className='list_input'>
        <Input value={input} onChange={changeInput} style={{ width: '200px' }} placeholder="请输入部门" />
        <Button className="button" style={{ height: '20px' }} type="primary" onClick={()=>search(input)}>查询</Button>
        <Button className="addButton button" type="primary" onClick={addInfo}>添加</Button>
      </div>

      {/* 树形控件 列表 */}
      <div className='Tree'>
        <Tree defaultExpandAll={true}
          treeData={data}
          fieldNames={{ title: "name", key: "id", children: "son" }}
          blockNode={true} />
      </div>
    </div>
  </>);
}

export default DepartmentList;